<template>
  <div class="select-container myStyle">
    <el-select :filterable="isFilterable" v-el-select-loadmore="loadmore" v-model="value" :clearable="isClearable" :size="size" :style="{ width: width+' !important' }" @change="handeleChange" collapse-tags :placeholder="settings.placeholder" :multiple="settings.isMultiple">
      <el-option v-for="item in data" :key="item.sourceDataId" :label="item[settings.label]" :value="item[settings.value]"></el-option>
    </el-select>
  </div>
</template>

<script>
/* 
  settings:{
      placeholder 提示语,默认 "请选择"
      isSelected 是否以选项第一个作为当前项,默认false
      isMultiple 是否多选,默认false,
      title   选择器名称,
      size: 选择器尺寸,默认mini
      width 选择器宽度,默认element-ui自带的默认宽度
  }
  options:[
      { value 必填 , label 选填,如果不传,以value的值展示 }
  ]

*/
import { list, listPost } from "@/api/dialog/index";

export default {
  name: "",
  props: {
    // data: { type: Array, default: () => [], required: true },
    settings: {
      type: Object,
      default: () => {
        return {
          placeholder: "请选择",
          isSelected: true,
          isMultiple: false,
          label: "name",
          value: "name",
        };
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    url: {
      type: String,
      default: "/basic/productInfo/listSelect",
    },
    response: {
      type: String,
      default: "rows",
    },
    size: {
      type: String,
      default: "small",
    },
    isAll: {
      type: Boolean,
      default: true,
    },
    isFilterable: {
      type: Boolean,
      default: true,
    },
    isClearable: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "",
    },
  },

  data() {
    return {
      data: [],
      value: null,
      // 查询参数
      queryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 2000000,
      },
      dataItems: [], //下拉框显示的数据
      pageData: {
        //懒加载相关参数，这里代表从第一条数据开始加载，一次加载二十项
        pageIndex: 1,
        pageSize: 20,
      },
    };
  },
  created() {
    this.getList();
  },
  directives: {
    /** 下拉框懒加载 */
    "el-select-loadmore": {
      bind(el, binding) {
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function () {
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  methods: {
    /** 下拉框懒加载 */
    loadmore() {
      this.pageData.pageIndex++;
      this.getItems(this.pageData); //类似于分页查询
    },
    /** 一次加载二十条证券代码 */
    getItems(value) {
      let num = value.pageIndex*value.pageSize;
      this.dataItems = this.data.filter((item, index, arr) => {
        return index < num; //这里默认allData已经取到了数据，就不把获取allData数据的方法放上来了
      });
    },
    handeleChange(e) {
      this.$emit("select", e);
    },
    getList() {
      let queryParams = Object.assign(this.queryParams, this.formData);
      if (this.isAll == true) {
        this.data = [];
        let obj = {};
        obj[this.settings.label] = "全部";
        this.data.push(obj);
        // this.data = [{ this.settings.nsme: "全部" }];
      } else {
        this.data = [];
      }
      list(this.url, queryParams, "GET").then((res) => {
        this.data.push(...res[this.response]);
        this.value = this.settings.isSelected
          ? this.data[0][this.settings.value]
          : "";
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.select-container {
  display: flex;
  // padding-top: 3px;
  // align-items: center;
  .el-select {
    width: 180px !important;
    // height: 30px;
  }
  i {
    color: #2b5e88 !important;
  }
}
</style>
<style >
.myStyle .el-input--small .el-input__inner {
  height: 28px;
  line-height: 28px;
}
</style>